<template>
  <div class="leader" :style="`--min-width:${isExpand ? 'auto' : '202px'}`">
    <el-icon size="60px">
      <ElemeFilled />
    </el-icon>
    <el-menu
      default-active="1"
      class="el-menu-vertical"
      @open="handleOpen"
      @close="handleClose"
      router
      :collapse="isExpand"
    >
      <el-menu-item index="/">
        <template #title>
          <el-icon><House /></el-icon>
          <span>首页</span>
        </template>
      </el-menu-item>
      <el-sub-menu index="1">
        <template #title>
          <el-icon><ChatLineSquare /></el-icon>
          <span>消息列表</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/about">滚动加载</el-menu-item>
          <el-menu-item index="/user">用户</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>
          <el-icon><Document /></el-icon>
          <span>表格/表单</span>
        </template>
        <el-menu-item index="/form/table"> 表格和表单 </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>
          <el-icon><Mug /></el-icon>
          <span>组件库</span>
        </template>
        <el-menu-item index="/tool/swiper">轮播图</el-menu-item>
        <el-menu-item index="/tool/video">视频播放</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script>
import {
  ElemeFilled,
  Setting,
  Document,
  House,
  CameraFilled,
  Mug,
  DArrowRight,
  ChatLineSquare,
} from "@element-plus/icons-vue";
import { defineComponent } from "vue";
export default defineComponent({
  components: {
    ElemeFilled,
    Setting,
    Document,
    DArrowRight,
    CameraFilled,
    ChatLineSquare,
    House,
    Mug,
  },
  props: {
    isExpand: Boolean,
  },
  methods: {
    trigger() {},
  },
});
</script>

<style scoped lang="scss">
.leader {
  user-select: none;
  height: 100%;
  display: flex;
  padding-top: 2em;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  transition: all 0.3s;
  width: var(--min-width);
  position: relative;
  .el-menu-vertical {
    margin-top: 2em;
    width: 100%;
  }
  .expand-btn {
    position: absolute;
    right: -35px;
    top: 50%;
    cursor: pointer;
    z-index: 8;
  }
  .expand-btn:hover {
    transform: scale(1.1);
  }
}
</style>